<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @keyframes ColorChange {
        0% {
          outline: 1px solid lightgreen;
        }

        50% {
          outline: 1px solid green;
        }

        1000% {
          outline: 1px solid lightgreen;
        }
      }

      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        outline: 1px solid red;
        animation: ColorChange 500ms ease infinite;
      }

      line,
      polyline,
      rect {
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    </style>
  </head>

  <body>
    <svg width="600"
         height="600"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         stroke-linecap="round"
         stroke-linejoin="round"
         viewBox="0 0 600 600">
      <!-- 第十章 剪裁和蒙版 -->

      <defs>
        <clipPath id="clipPath">
          <rect x="15"
                y="15"
                width="40"
                height="45"
                style="stroke: gray;fill:none;" />
        </clipPath>
        <clipPath id="curveClip">
          <path id="curve1"
                d="M5 55 C 25 5, 45 -25, 75 55, 85 85, 20 105, 40 55 Z"
                style="stroke: black; fill: none;" />
        </clipPath>
        <clipPath id="textClip">
          <text id="text1"
                x="20"
                y="20"
                transform="rotate(60)"
                style="font-family: 'Liberation Sans';
          font-size: 48pt; stroke: black; fill: none;">
            CLIP
          </text>
        </clipPath>
      </defs>

      <image xlink:href="/source/sky.jpg"
             x="0"
             y="0"
             width="200px"
             height="200px"
             style="clip-path: url(#textClip);" />
      <!-- TODO 未完成 -->
    </svg>


    <script>
      const ele = document.querySelector("#xxx");
      let n = 0;
      function Renderer() {
        n++;
        if (n >= 360) n = 0;
        window.requestAnimationFrame(Renderer);
      }
      // Renderer();
    </script>
  </body>

</html>
